<#include "/main.ftl"/>
<@diamondNav/>
<body>

<div id="content" style="margin-left: 13%">
    <div style="margin-top: 5%;margin-left: 1%;width: 100%">

        <#if testCase?? && testCase.testCaseId??>
            <form action="/testCaseController/updateTestCase" id="testCaseSubmit"
        <#else >
             <form action="/testCaseController/addTestCase" id="testCaseSubmit"
        </#if>
                   method="post" id="myForm" class="form-horizontal" >
        <div class="form-group">
            <div class="row">
                <div class="col-md-5">
                    <div class="col-md-3">
                        <label class="control-label" for="testCaseName">用例名称</label>
                    </div>
                    <div class="col-md-9">
                        <input class="form-control" name="testCaseName" type="text" id="testCaseName"
                               placeholder="接口别名"
                               value="<#if testCase?? && testCase.testCaseName ??>${testCase.testCaseName!}</#if>"/>
                         <#if testCase??>
                             <@spring.bind "testCase.testCaseName" />
                             <span style="color: red"> <@spring.showErrors ""/> </span>
                         </#if>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-md-4">
                        <label for="expectResult" class="control-label">入参类型</label>
                    </div>
                    <div class="col-md-6">
                        <select class="form-control" name="paramType" id="paramType">
                            <option value="body"
                                    <#if testCase.paramType?? && testCase.paramType =="body">selected="selected"</#if>>
                                body
                            </option>
                            <option value="keyValue"
                                    <#if testCase.paramType?? && testCase.paramType =="keyValue">selected="selected"</#if>>
                                keyValue
                            </option>
                            <option value="all"
                                    <#if testCase.paramType?? && testCase.paramType =="all">selected="selected"</#if>>
                                混合类型
                            </option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-md-4">
                        <label for="paramValue" class="control-label">断言类型</label>
                    </div>
                    <div class="col-md-6">
                        <select id="matchType" name="matchType" class="form-control">
                            <option value=1
                                    <#if testCase.matchType?? && testCase.matchType ==1>selected="selected"</#if>>全文匹配
                            </option>
                            <option value=2
                                    <#if testCase.matchType?? && testCase.matchType ==2>selected="selected"</#if>>包含
                            </option>
                            <option value=3
                                    <#if testCase.matchType?? && testCase.matchType ==3>selected="selected"</#if>>不包含
                            </option>
                            <option value=4
                                    <#if testCase.matchType?? && testCase.matchType ==4>selected="selected"</#if>>
                                jsonPath
                            </option>
                            <option value=5
                                    <#if testCase.matchType?? && testCase.matchType ==5>selected="selected"</#if>>xPath
                            </option>
                            <option value=6
                                    <#if testCase.matchType?? && testCase.matchType ==6>selected="selected"</#if>>正则
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-10" id="match"
                <#if testCase.matchType?? && testCase.matchType gt 3><#else >style="display: none"</#if>>
                    <div class="col-md-1">
                        <label for="expressionDiv" class="control-label">表达式</label>
                    </div>
                    <div id="expressionDiv">
                        <button type="button" class="btn btn-success" id="addExpressionButton">
                            增加表达式
                        </button>
                        <button type="button" class="btn btn-success" id="testExpressionButton">
                            测试表达式
                        </button>
                        <#if testCase.matchType?? && testCase.matchType gt 3>
                            <#assign expressionList=testCase.matchExpression?eval />
                             <input type="hidden" name="expressionIndex" id="expressionIndex" value="${expressionList?size}">
                            <#list expressionList as expression>
                                <div style='margin-bottom: 5px' name =${expression_index}  id="expression${expression_index}">
                <input type='text' id=expressionValue${expression_index}  value="${expression}"
                       style='margin-left: 5%;width: 80%;border:1px solid #378888;font-size:25px' placeholder='表达式'>
                &nbsp;&nbsp;
                                    <a type ='button'  onclick='deleteExpressionDiv("expression${expression_index}")'><img src='/images/delete.png'></a>
                                </div>
                            </#list>
                            <#else >
                             <input type="hidden" name="expressionIndex" id="expressionIndex" value="0">
                        </#if>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-5">
                    <label for="paramValue" class="control-label">入参</label>
                    <div id="paramKeyDiv">
                        <button type="button" class="btn btn-success" id="addParamButton">
                            增加参数
                        </button>
                    <#if testCase?? && testCase.paramType?? &&testCase.paramType=="keyValue">
                        <#if testCase.paramKeyValue?? && testCase.paramKeyValue!=''>
                            <@writeKeyValue testCase.paramKeyValue/>
                        <#else >
                                     <input type="hidden" id="paramIndex" value="0">
                        </#if >
                    <#else >
                                 <input type="hidden" id="paramIndex" value="0">
                    </#if >

                    </div>
                    <div id="paramValueDiv">
                        <textarea id="paramValue" name="paramValue" class="form-control"
                                  style="min-height: 60%;max-width: 100%;min-width: 100%"
                                  placeholder="用例入参"><#if testCase?? && testCase.paramValue ??>${testCase.paramValue!}</#if></textarea>
                    </div>
                </div>
                <div class="col-md-5">
                    <label for="expectResult" class="control-label">预期结果(<span style="color: red">非json格式请选择text编辑类型</span>)</label>
                    <div id="expectResultDiv">

                    </div>

                </div>
            </div>
        </div>
        <div>
            <input name="interfaceId" id="interfaceId" type="hidden"
                   value="${Session.interfaceId}"/>
            <input type="hidden" name="paramKeyValue" id="paramKeyValue">
            <input name="testCaseId" id="testCaseId" type="hidden"
                   value="<#if testCase?? && testCase.testCaseId ??>${testCase.testCaseId!}</#if>">
            <input name="expectResult" id="expectResult" type="hidden">
            <input name="matchExpression" id="matchExpression" type="hidden">
        </div>
        <div id="wait" style="top: 40%;left: 35%;position: absolute">
            <tr>
                <td>
                    <img src="/images/wait.jpg" alt="" width="20%" height="10%">
                    <span style='font-family:微软雅黑;font-size:18px;font-weight:normal;font-style:normal;text-decoration:none;color:#c1767a;'><B>发送中,请稍等...</B></span>
                </td>
            </tr>
        </div>
        <div class="form-group">
            <div class="col-md-offset-8 col-md-10">
                <button type="button" class="btn btn-success " id="back">
                    返回
                </button>
                <button type="reset" class="btn btn-success ">
                    重置
                </button>
                <button type="button" id="runButton" class="btn btn-success " onclick="runTest.runTestCallByCase()">
                    调用
                </button>
                <button type="submit" class="btn btn-success ">
                    提交
                </button>
            </div>
        </div>
    </form>
    </div>
    <div style="margin-top: 30%;position: absolute">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">表达式校验</h4>
                    </div>
                    <div class="modal-body">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
</div>
</body>

<script src="${base}/scripts/testCase/editTestCasePage.js"></script>
<script type="text/javascript">
    var oKeyValueUtil;
    $(document).ready(function () {
        $("#wait").hide();
        if ("${Session.interfaceMethod}" == "GET") {
            $("#paramType option[value='body']").remove();
            $("#paramType option[value='all']").remove();
        }
        oKeyValueUtil = new KeyValueUtil();
        oKeyValueUtil.init($('#paramKeyDiv'), $("#addParamButton"), $("#paramKeyValue"));
        oKeyValueUtil.switchParam($("#paramType"));
        /**回写预期结果,如果不是json格式全部按照字符串处理**/
         <#if testCase.expectResult?? &&
         (testCase.expectResult?ends_with("}")||testCase.expectResult?ends_with("]"))>
        testCase.initExpectResult(${testCase.expectResult!});
         <#else >
           testCase.initExpectResult('${testCase.expectResult!}');
         </#if>
    });
</script>